{% extends 'commons/base_list.html' %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    {% block top_title %}
    <title>美多商城-商品列表</title>
    {% endblock top_title %}
{% block top_static %}
    <link rel="stylesheet" type="text/css" href="{{ static('css/jquery.pagination.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
    <script type="text/javascript" src="{{ static('js/jquery-1.12.4.min.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
{% endblock top_static %}
</head>
<body>
<div id="app">
    {% block body_content %}


    <div class="main_wrap clearfix">
        <div class="l_wrap fl clearfix">
            <div class="new_goods" v-cloak>
                <h3>热销排行</h3>
                <ul>
                    <li v-for="sku in hot_skus">
                        <a :href="sku.url"><img :src="sku.default_image_url"></a>
                        <h4><a :href="sku.url">[[ sku.name ]]</a></h4>
                        <div class="price">￥[[ sku.price ]]</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="r_wrap fr clearfix">
            <div class="sort_bar">
                <a href="{{ url('goods:list', args=(category_id, page_num)) }}?sort=default" {% if sort=='default'
                   %}class="active" {% endif %}>默认</a>
                <a href="{{ url('goods:list', args=(category_id, page_num)) }}?sort=price" {% if sort=='price'
                   %}class="active" {% endif %}>价格</a>
                <a href="{{ url('goods:list', args=(category_id, page_num)) }}?sort=hot" {% if sort=='hot'
                   %}class="active" {% endif %}>人气</a>
            </div>
            <ul class="goods_type_list clearfix">
                {% for sku in page_skus %}
                <li>
                    <a href="{{ url('goods:detail',args=(sku.id,)) }}"><img src="{{ sku.default_image.url }}"></a>
                    <h4><a href="detail.html">{{ sku.name }}</a></h4>
                    <div class="operate">
                        <span class="price">￥{{ sku.price }}</span>
                        <span class="unit">台</span>
                        <a href="#" class="add_goods" title="加入购物车"></a>
                    </div>
                </li>
                {% endfor %}
            </ul>
            <!--分页器-->
            <div class="pagenation">
                <div id="pagination" class="page"></div>
            </div>
        </div>
    </div>
    {% endblock body_content %}


</div>
{%  block bottom_script %}
<script type="text/javascript">
    let category_id = "{{ category_id }}";
</script>
<script type="text/javascript" src="{{ static('js/common.js') }}"></script>
<script type="text/javascript" src="{{ static('js/list.js') }}"></script>
<script type="text/javascript" src="{{ static('js/jquery.pagination.min.js') }}"></script>
<script>
    $(function () {
        $('#pagination').pagination({
            currentPage: "{{page_num}}", //当前所在页码
            totalPage: "totalPage", // 总页数
            callback: function (current) {
                {
                    location.href = '/list/115/1/?sort=default';

                }
                {
                    location.href = '/list/{{ category_id }}/' + current + '/?sort={{ sort }}';

                }
            }
        })
    });
</script>
{% endblock bottom_script %}
</body>
</html>